<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./assets/global.css" />
    <style>
      .pk-container {
        display: flex;
        justify-content: center;
        flex-direction: column;
        height: 100vh;
        max-width: 400px;
        width: 100%;
        overflow: hidden;
        user-select: none;
      }

      .pk-cards {
        display: flex;
        align-items: center;
        position: relative;
      }

      .pk-card {
        flex: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: relative;
      }

      .pk-card img {
        width: 100%;
        object-fit: cover;
        user-select: none;
      }

      .pk-vs {
        font-size: 40px;
        font-weight: bold;
        padding: 0 20px;
      }

      .leftCardMoveIn {
        animation-name: leftCardMoveIn;
        animation-duration: 0.5s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
      }
      .leftCardMoveOut {
        animation-name: leftCardMoveOut;
        animation-duration: 0.5s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
      }

      .rightCardMoveIn {
        animation-name: rightCardMoveIn;
        animation-duration: 0.5s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
      }

      .rightCardMoveOut {
        animation-name: rightCardMoveOut;
        animation-duration: 0.5s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
      }

      .pk-vs {
        animation-name: vsFadeMoveIn;
        animation-duration: 0.5s;
        animation-timing-function: ease-in-out;
        animation-fill-mode: forwards;
      }

      .like-btn {
        position: absolute;
        bottom: -30px;
      }

      @keyframes leftCardMoveIn {
        0% {
          transform: translateX(-200px);
        }
        100% {
          transform: translateX(0);
        }
      }
      @keyframes leftCardMoveOut {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(-200px);
        }
      }
      @keyframes rightCardMoveIn {
        0% {
          transform: translateX(200px);
        }
        100% {
          transform: translateX(0);
        }
      }
      @keyframes rightCardMoveOut {
        0% {
          transform: translateX(0);
        }
        100% {
          transform: translateX(200px);
        }
      }

      @keyframes vsFadeMoveIn {
        0% {
          opacity: 0;
          transform: translateY(-100px);
        }
        100% {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .pk-btns {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
      }
      .confirm-btn {
        display: inline-block;
        padding: 20px 40px;
        background-color: #3575cf;
        color: azure;
        border-radius: 50px;
        cursor: pointer;
        user-select: none;
      }
      .confirm-btn:active {
        opacity: 0.7;
      }

      .pk-card.like::after {
        position: absolute;
        border: 10px solid #e13b1e;
        content: "";
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        user-select: none;
      }
      .pk-card span {
        position: absolute;
        left: 12px;
        bottom: 12px;
        width: 20px;
        color: #fff;
        text-shadow: 2px 2px #000000;
      }
    </style>
  </head>

  <body>
    <div class="pk-container" hidden>
      <h2>你更喜欢哪个？</h2>
      <div class="pk-cards">
        <div class="pk-card leftCardMoveIn">
          <img />
          <span></span>
        </div>
        <div class="pk-vs">VS</div>
        <div class="pk-card rightCardMoveIn">
          <img />
          <span></span>
        </div>
      </div>
      <div class="pk-btns">
        <div class="confirm-btn">确定</div>
      </div>
    </div>

    <script type="module">
      import { Randoms } from "https://gcore.jsdelivr.net/npm/@3r/tool/lib/randoms.js";
      // 加载配置数据
      fetch("./assets/stars/label.txt")
        .then((res) => res.text())
        .then(async (res) => {
          let stars = [];
          let label = res.split("\n").filter((a) => a);

          console.log(label);

          stars = label.map((n) => {
            let tmpArr = n.split("_");
            return {
              name: tmpArr[2],
              img: `./assets/stars/${tmpArr[1]}.jpg`,
            };
          });
          // 容器
          let container = document.querySelector(".pk-container");

          // 卡片元素
          let cardDom = document.querySelectorAll(".pk-card");
          // 随机抽取10条数据
          let pkStars = Randoms.getDisorganizeArray(stars).slice(0, 10);
          // 预加载图片
          await Promise.all(pkStars.map((s) => fetch(s.img)));
          container.hidden = false;

          // 左/右卡片
          let leftCardDom = cardDom.item(0);
          let rightCardDom = cardDom.item(1);
          let vsTextDom = document.querySelector(".pk-vs");
          // 确认按钮
          let confirmBtnDom = document.querySelector(".confirm-btn");

          // 标题
          let titleDom = document.querySelector(".pk-container h2");

          nextStar(leftCardDom);
          nextStar(rightCardDom);
          // 下一个明星
          function nextStar(dom) {
            let star = pkStars.shift();
            let animName =
              dom === leftCardDom ? "leftCardMove" : "rightCardMove";

            dom.classList.add(`${animName}Out`);
            dom.classList.remove(`${animName}In`);

            if (!star) {
              console.log("对比结束");
              setTimeout(() => {
                dom.remove();
                vsTextDom.remove();
                confirmBtnDom.remove();
                document
                  .querySelector(".pk-card.like")
                  .classList.remove("like");
                titleDom.textContent = "你更喜欢TA";
              }, 0.5);
              return;
            }

            setTimeout(() => {
              let img = dom.querySelector("img");
              let span = dom.querySelector("span");
              img.setAttribute("src", star.img);
              span.textContent = star.name;
              dom.classList.add(`${animName}In`);
              dom.classList.remove(`${animName}Out`);
            }, 0.5);
          }

          leftCardDom.addEventListener("click", (ev) => {
            rightCardDom.classList.remove("like");
            leftCardDom.classList.add("like");
          });

          rightCardDom.addEventListener("click", (ev) => {
            leftCardDom.classList.remove("like");
            rightCardDom.classList.add("like");
          });

          confirmBtnDom.addEventListener("click", (ev) => {
            if (leftCardDom.classList.contains("like")) {
              nextStar(rightCardDom);
            } else if (rightCardDom.classList.contains("like")) {
              nextStar(leftCardDom);
            }
          });
          console.log(cardDom, pkStars);
          console.log(stars);
        });
    </script>
  </body>
</html>
